<template>
  <div>
      <h2>My Heroes</h2>
    <ul class="heroes">
        <li v-for="hero in heroes"
         :class="{selected: hero === selectedHero}"
         @click="onSelected(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
        </li>
    </ul>
    <div v-if="selectedHero">
        <h2>
            {{selectedHero.name}} is my hero
        </h2>
        <button @click="goToDetail()">View Details</button>
    </div>
   </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "HeroList",
  data() {
    return {
      selectedHero: ""
    };
  },
  computed: {
    ...mapState({
      heroes: state => state.heroes.heroes
    })
  },
  methods: {
    onSelected: function(hero){
        this.selectedHero = hero
    },
    goToDetail: function() {
      this.$router.push({path: `/angular/detail/${this.selectedHero.id}`})
    }
  }
};
</script>
<style scoped>
.selected {
  background-color: #cfd8dc !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #eee;
  margin: 0.5em;
  padding: 0.3em 0;
  height: 1.6em;
  border-radius: 4px;
  text-align: left;
}
.heroes li:hover {
  color: #607d8b;
  background-color: #ddd;
  left: 0.1em;
}
.heroes li.selected:hover {
  background-color: #bbd8dc !important;
  color: white;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607d8b;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: 0.8em;
  border-radius: 4px 0 0 4px;
}
button {
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
</style>


